@mixin browseItems() {
  .esri-browseitems {
    margin: 0 auto;
    width: 100%;
    font-family: "Avenir LT W01 35 Light", Arial, Helvetica, sans-serif;
    height: 100%;
    .gallery {
      min-height: 450px;
      margin: 0 auto;
      height: 100%;
      clear: both;
      .gallery-left {
        float: left;
        width: 25%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 90%;
        a {
          text-decoration: none;
          color: #6e6e6e;
          font-size: 15px;
        }
      }
      .gallery-right {
        float: right;
        width: 74%;
        height: 100%;
        margin-top: 8px;
        p.filter-title {
          margin-bottom: 0.3em;
          padding: 0 1.5% 0 1.5%;
          font-size: 17px;
        }
      }
      .template-info-panel {
        width: 279px;
        padding: 15px;
        background: rgba(255, 255, 255, 1);
        border: solid 1px #e0e0e0;
        border-right: none;
        right: -680px;
        top: 0px;
        overflow-x: hidden;
        position: absolute;
        z-index: 800;
        box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.25);
        transition: all 500ms ease-in-out;
        height: 94.5%;
      }
    }
    .esri-loaderthrob {
      position: absolute;
      background: #fff url("../base/images/loading-throb.gif") 100% center no-repeat !important;
      top: 45%;
      width: 33px;
      text-align: center;
      z-index: 100;
      color: #ccc;
      height: 39px;
      left: 58%;
    }
    .dgrid {
      .dgrid-loading {
        position: absolute;
        background: #fff url("../base/images/loading-throb.gif") 100% center no-repeat !important;
        top: 45%;
        width: 33px;
        text-align: center;
        z-index: 100;
        color: #ccc;
        height: 39px;
        left: 58%;
      }
      .gallery-view {
        h5 {
          width: 100%;
          height: 2.125em;
          line-height: 1em;
          font-size: 16px;
          word-wrap: break-word;
          font-family: "Avenir LT W01 35 Light", Arial, Helvetica, sans-serif;
          overflow: hidden;
        }
      }
      border: none !important;
      height: auto;
      min-height: 180px !important;
      .dgrid-footer {
        background: none repeat scroll 0 0 #fff !important;
        position: relative;
      }
      .dgrid-status {
        display: none !important;
        visibility: hidden;
      }
      .dgrid-pagination {
        .dgrid-page-link {
          background: none repeat scroll 0 0 #f2f2f2;
          border: 1px solid #ededed;
          border-radius: 4px 4px 4px 4px;
          color: #999999;
          font-size: 1em;
          line-height: 1.5em;
          margin: 5px;
          padding: 5px 10px;
          float: left;
          &:hover {
            background-color: #007ac2;
            color: #fff;
          }
        }
        .dgrid-page-skip {
          background: none repeat scroll 0 0 #f2f2f2;
          border: 1px solid #ededed;
          border-radius: 4px 4px 4px 4px;
          color: #999999;
          font-size: 1em;
          line-height: 1.5em;
          margin: 5px;
          padding: 5px 10px;
          float: left;
        }
        .dgrid-page-disabled {
          background-color: #007ac2;
          color: #fff;
        }
        .dgrid-first {
          &:hover {
            background-color: #007ac2;
            color: #fff;
          }
          background: none repeat scroll 0 0 #f2f2f2;
          border: 1px solid #ededed;
          border-radius: 4px 4px 4px 4px;
          color: #999999;
          font-size: 1em;
          line-height: 1.5em;
          margin: 5px;
          padding: 5px 10px;
          float: left;
        }
        .dgrid-previous {
          &:hover {
            background-color: #007ac2;
            color: #fff;
          }
          background: none repeat scroll 0 0 #f2f2f2;
          border: 1px solid #ededed;
          border-radius: 4px 4px 4px 4px;
          color: #999999;
          font-size: 1em;
          line-height: 1.5em;
          margin: 5px;
          padding: 5px 10px;
          float: left;
        }
        .dgrid-next {
          &:hover {
            background-color: #007ac2;
            color: #fff;
          }
          background: none repeat scroll 0 0 #f2f2f2;
          border: 1px solid #ededed;
          border-radius: 4px 4px 4px 4px;
          color: #999999;
          font-size: 1em;
          line-height: 1.5em;
          margin: 5px;
          padding: 5px 10px;
          float: left;
        }
        .dgrid-last {
          &:hover {
            background-color: #007ac2;
            color: #fff;
          }
          background: none repeat scroll 0 0 #f2f2f2;
          border: 1px solid #ededed;
          border-radius: 4px 4px 4px 4px;
          color: #999999;
          font-size: 1em;
          line-height: 1.5em;
          margin: 5px;
          padding: 5px 10px;
          float: left;
        }
      }
    }
    .hide {
      display: none;
    }
    .top-bar {
      clear: both;
      width: 100%;
      padding: 0 10px;
      margin: auto;
    }
    #gallery-grid_search {
      width: 31%;
      margin-bottom: 10px;
    }
    .gallery-left {
      ul {
        list-style: none;
        padding: 0 0;
        margin: 15px 0;
        width: 100%;
        border-right: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        border-left: 1px solid #efefef;
      }
      li {
        a {
          padding: 0.5rem 0.2rem 0.5rem 0.7rem;
          font-size: 15px;
          margin-right: 0;
          display: block;
          line-height: 1.42857143;
          border-top: 1px solid #efefef;
          width: 90%;
          color: #6e6e6e;
          position: relative;
          &:hover {
            &:after {
              content: "»";
              opacity: 1;
              position: absolute;
              right: 0;
              top: 0.5rem;
              padding: 0 0.3875rem;
              transition: all 150ms linear;
            }
          }
        }
      }
      li.active {
        > a {
          color: #6e6e6e;
          cursor: default;
          background-color: #d2e9f9;
          &:focus {
            color: #6e6e6e;
            cursor: default;
            background-color: #d2e9f9;
          }
        }
      }
    }
    .dgrid-grid.dgrid {
      .gallery-view {
        img {
          border: 1px solid #e0e0e0;
          padding: 4px;
          transition: all 0.2s ease-in-out;
          &:hover {
            border-color: #333;
          }
        }
      }
      .dgrid-row {
        .gallery-view {
          float: left;
          width: 29.9%;
          padding: 1% 1.6%;
          margin: auto;
          position: relative;
          &:hover {
            cursor: pointer;
            background: #fff;
            background-color: #fff;
          }
        }
      }
      .dgrid-scroller {
        position: relative;
        min-height: 380px;
      }
      background: none repeat scroll 0 0 #fff;
      border: none;
      width: auto !important;
      height: auto;
      max-height: 75%;
      overflow-y: auto;
      .dgrid-content {
        background: none repeat scroll 0 0 #fff;
        border: none;
        width: auto !important;
        height: auto;
        overflow-y: hidden;
      }
      .dgrid-row.dgrid-selected {
        .gallery-view {
          background: #fff;
          background-color: #fff;
          &:hover {
            background: #fff;
            background-color: #fff;
          }
        }
      }
      .dgrid-navigation {
        float: inherit !important;
        margin: 0 auto;
        height: 40px;
        text-align: center;
        display: table;
        width: auto !important;
      }
    }
    .template-overlay {
      position: absolute;
      z-index: 100;
      top: 12px;
      left: 15px;
      background: rgba(0, 0, 0, 0.7);
      text-align: center;
      color: #fff;
      width: 187px;
      height: 124px;
      line-height: 124px;
      pointer-events: none;
      font-size: 15px !important;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      p {
        font-size: 15px;
      }
    }
    .instructions {
      margin-top: 10px;
      margin-bottom: 10px;
      width: 50%;
      float: left;
      span {
        font-size: 17px;
        display: inline-block;
      }
      span.hide.messageLeft {
        width: 0;
        padding: 0;
        display: none;
      }
      span.messageLeft {
        width: 37%;
        padding-right: 6.25%;
        vertical-align: top;
      }
      span.messageRight {
        width: 100%;
        vertical-align: top;
      }
      .messageRight {
        opacity: 1;
        transition: opacity 250ms ease-in-out, left 0ms linear;
      }
    }
    .input-group-btn {
      .btn {
        margin-top: 0.6em;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 2.25rem;
      }
    }
    .dgrid-no-data {
      position: relative;
      font-size: 17px;
      margin: 20px;
    }
    .templates.fade {
      .dgrid {
        opacity: 0.3;
        transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
        pointer-events: none;
      }
      .filter-title {
        opacity: 0.3;
        transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
        pointer-events: none;
      }
    }
    .templates {
      opacity: 1;
      transition: opacity 250ms ease-in-out, left 0ms linear;
    }
    .soria {
      .dgrid-selected {
        background: #fff;
        background-color: #fff;
      }
    }
    .template-info-showing {
      min-height: 150px;
      .template-info {
        display: block;
      }
      .thumbnail {
        border: 1px solid #e0e0e0;
        width: auto;
        margin: 0 0 10px 0;
        float: left;
        padding: 0;
        &:hover {
          border-color: #e0e0e0;
          cursor: auto;
        }
        > img {
          margin: 0;
          width: 277px;
        }
      }
      h4 {
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        clear: left;
        color: #616161;
        font-weight: normal;
        max-height: 3em;
        overflow: hidden;
        height: auto;
      }
      p {
        font-size: 1rem !important;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 7.5em;
        line-height: 1.25em;
      }
    }
    .panel-actions {
      width: 100%;
      position: absolute;
      bottom: 15px;
      left: 0;
      opacity: 0;
      transition: opacity 250ms ease 500ms;
      text-align: center;
    }
    .quiet-scroll {
      pre {
        &::-webkit-scrollbar {
          width: 4px !important;
          height: 4px !important;
          border-left: 0;
          background: rgba(0, 0, 0, 0.1);
        }
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.4);
          border-radius: 0;
        }
        &::-webkit-scrollbar-track {
          background: none;
        }
      }
      &::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
        border-left: 0;
        background: rgba(0, 0, 0, 0.1);
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0;
      }
      &::-webkit-scrollbar-track {
        background: none;
      }
    }
    .btn-main {
      width: 90%;
      margin-bottom: 10px;
    }
    .btn-secondary {
      background-color: transparent;
      color: #5daddd;
      width: 44%;
      border: 1px solid #5daddd;
      margin: 4px 4px 10px 4px;
      &:hover {
        text-decoration: none;
        background-color: #5daddd;
        color: white;
      }
    }
    .btn-wide {
      width: 90%;
    }
    .btn-cancel {
      background: none;
      border-color: #fff;
      color: #828282;
      &:hover {
        background: none;
        border-color: #fff;
        color: #005e95;
      }
    }
    p {
      margin: 0;
    }
    .btn {
      text-transform: uppercase;
      font-size: 14px;
      padding: 0.37rem 0.9rem;
      box-shadow: none;
      white-space: normal;
      word-wrap: break-word;
    }
    .searchBar {
      margin-right: 15px;
      margin-top: 3px;
      max-width: 37%;
      width: auto;
      float: right;
      .esriSearchBox {
        padding-left: 1.5em !important;
        background: url("../base/images/search.svg") no-repeat 0.25em center white !important;
        display: inline-block;
        padding: 0 0.31rem;
        font-size: 0.9375rem;
        line-height: 1.55rem;
        color: #595959;
        border: 1px solid #a9a9a9;
        transition: border-color 150ms linear;
        -webkit-appearance: textfield;
        height: 2.25rem;
        border-radius: 4px;
        width: auto;
        margin: 0 0 0 0 0;
        float: left;
        width: auto;
      }
      .btn {
        margin-top: 0.6em;
        height: 38px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .esriSearchBox {
      &:focus {
        border: 1px solid #0079c1;
      }
    }
  }
  /*-------- Filters  -------------------------*/
  .esri-browseitems.filters {
    .esriHelpIcon {
      background: url("../base/images/helpIcon.png") no-repeat center;
      width: 20px;
      height: 20px;
      margin: 1px 0 0 10px;
      cursor: pointer;
      display: inline-block;
    }
    .esriHelpIcon.hide {
      display: none;
    }
    .instructions {
      width: 60%;
      span.messageRight {
        max-width: 40%;
        width: auto;
        vertical-align: top;
      }
    }
  }
  .esri-browseitems.nofilters {
    .esri-loaderthrob {
      left: 48%;
    }
    .gallery {
      .gallery-left {
        width: 0;
        display: none;
      }
      .gallery-right {
        width: 100%;
        float: left;
        overflow: hidden;
      }
      span.messageRight {
        width: 100%;
        vertical-align: top;
      }
    }
    span.messageLeft {
      width: 0;
      padding: 0;
      display: none;
    }
    .dgrid-grid.dgrid {
      .dgrid-scroller {
        margin-bottom: 0px !important;
      }
    }
  }
  .esri-browseitems.nofilters.wide {
    .dgrid-grid.dgrid {
      .dgrid-row {
        .gallery-view {
          width: 21%;
        }
      }
    }
    .template-overlay {
      top: 14px;
      left: 18px;
    }
  }
  /*-------- RTL Styles  -------------------------*/
  .html[dir="rtl"] {
    .esri-browseitems.filters {
      .esriHelpIcon {
        margin: 0 10px 0 0;
      }
    }
    .esri-browseitems {
      .searchBar {
        .esriSearchBox {
          padding-left: inherit;
          padding-right: 1.5em;
          float: right;
          border-radius: 0 4px 4px 0;
          background: #fff url("../base/images/search32.png") 98% center no-repeat !important;
        }
        margin: 0 0 0 10px;
        margin-right: inherit;
        margin-left: 15px;
        .btn {
          border-radius: 4px 0 0 4px;
        }
      }
      .dgrid {
        .dgrid-pagination {
          .dgrid-page-link {
            float: right;
          }
          .dgrid-page-skip {
            float: right;
          }
        }
        .dgrid-row {
          .gallery-view {
            float: right;
          }
        }
      }
      .gallery {
        .gallery-left {
          float: right;
        }
        .template-info-panel {
          border-left: none;
          left: -680px;
          right: inherit;
          box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.25);
          transition: all 500ms ease-in-out;
        }
      }
      .gallery-left {
        li {
          a {
            &:hover {
              &:after {
                right: inherit;
                left: 0;
              }
            }
          }
        }
      }
      .template-overlay {
        top: 11px;
        left: 6px;
      }
      .instructions {
        float: right;
      }
      .searchBar {
        float: left;
      }
    }
    .esri-browseitems.showing {
      .gallery {
        .template-info-panel {
          left: 0;
          right: inherit;
        }
      }
    }
  }
  .esri-browseitems.showing {
    .dgrid-grid.dgrid {
      .gallery-view {
        img {
          &:hover {
            border-color: #e0e0e0;
          }
        }
      }
    }
    .instructions {
      .messageRight {
        opacity: 0.3;
        transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
        pointer-events: none;
      }
    }
    .templates {
      .dgrid {
        opacity: 0.3;
        transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
        pointer-events: none;
      }
      .filter-title {
        opacity: 0.3;
        transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
        pointer-events: none;
      }
    }
    .esriHelpIcon {
      opacity: 0.3;
      transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
      pointer-events: none;
      pointer-events: none;
      cursor: default;
    }
    .gallery {
      .gallery-right {
        cursor: pointer;
      }
      .template-info-panel {
        opacity: 1;
        right: 0px;
      }
    }
    .panel-actions {
      opacity: 1;
    }
  }
  /* Medium screens */
  @media all and (max-width: 800px) {
    .esri-browseitems {
      .dgrid {
        .dgrid-content {
          display: flex;
          flex-flow: row wrap;
          justify-content: space-around;
        }
        .dgrid-row {
          flex: 0 1 50%;
        }
      }
    }
  }
  /* Small screens */
  @media all and (max-width: 500px) {
    .esri-browseitems {
      .dgrid {
        .dgrid-content {
          display: flex;
          flex-flow: column wrap;
        }
        .dgrid-pagination {
          .dgrid-next {
            flex: 0 1 50%;
          }
        }
      }
      .dgrid-grid.dgrid {
        .dgrid-navigation {
          margin: 0;
          flex-flow: row wrap;
          display: inline-flex;
          align-items: flex-end;
        }
      }
      .dgrid-pagination-links {
        flex: 0 1 50%;
      }
    }
    .esriBrowseAnalysisLayers {
      .top-bar {
        display: flex;
        flex-flow: row wrap;
        flex-direction: column;
      }
      .dgrid {
        .dgrid-pagination {
          .dgrid-previous {
            flex: 0 1 50%;
          }
        }
      }
    }
  }
}

@if $include_BrowseItems == true {
  @include browseItems();
}
